<template>
	<view class="empire-mine">
		<div class="empire-mine__avatar">
			<EmpireAvatar src="/static/home/tx1.png" name="Foron" title="普通用户">
				<uni-icons type="notification" size="30" color="#fff" @click="handleNoticeClick"></uni-icons>
			</EmpireAvatar>
			<view v-if="!vip" class="vip">
				<text>开通会员·享5折特惠及9大特权</text>
				<button size="mini">查看详情</button>
			</view>
		</div>
		<view class="empire-mine__body">
			<view class="box-padding__lr">
				<MineList :data="mineData"></MineList>
			</view>
			<EmpireCard
				title="我的订单"
				show-all-text="全部订单"
				:custom-style="{ borderRadius: '30rpx', padding: '30rpx', margin: '20rpx' }"
				background-color="#fff"
			>
				<view class="empire-mall__around">
					<MineCarad
						v-for="(item, key) in orders"
						:key="key"
						:src="item.src"
						:text="item.text"
						:name="item.name"
					></MineCarad>
				</view>
			</EmpireCard>
			<view class="empire-mine__grid">
				<EmpireCard
					title="其他服务"
					:custom-style="{ borderRadius: '30rpx', padding: '30rpx' }"
					background-color="#fff"
				>
					<uni-grid :column="4">
						<uni-grid-item v-for="(item, key) in services" :key="key" :index="key">
							<view class="empire-mine__servies">
								<view class="empire-mall__center">
									<image :style="{ width: '64rpx', height: '64rpx' }" :src="item.src"></image>
								</view>
								<text>{{ item.text }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</EmpireCard>
			</view>
		</view>
	</view>
</template>

<script setup>
import EmpireAvatar from '@/components/empire-avatar.vue';
import MineList from './mine-list.vue';
import EmpireCard from '@/components/empire-card/index.vue';
import MineCarad from './mine-card.vue';
import { ref, onMounted, getCurrentInstance } from 'vue';

const vip = ref(false);
const mineData = ref({
	rest: 20,
	discount: 2,
	integral: 60,
	shopping: 3
});
const orders = ref([
	{
		src: '/static/待付款.png',
		name: '待支付',
		text: ''
	},
	{
		src: '/static/待发货.png',
		name: '待发货',
		text: '1'
	},
	{
		src: '/static/待收货.png',
		name: '待收货',
		text: '1'
	},
	{
		src: '/static/退款.png',
		name: '售后',
		text: '1'
	}
]);
const services = ref([
	{
		src: '/static/red-envelope.png',
		text: '储值送红包'
	},
	{
		src: '/static/gem.png',
		text: '会员中心'
	},
	{
		src: '/static/mall.png',
		text: '积分商城'
	},
	{
		src: '/static/店铺-fill.png',
		text: '商家入住'
	},
	{
		src: '/static/地址.png',
		text: '收货地址'
	},
	{
		src: '/static/md-favorite.png',
		text: '关注的人'
	},
	{
		src: '/static/md-extension.png',
		text: '我的拼团'
	},
	{
		src: '/static/我的收藏.png',
		text: '我的收藏'
	},
	{
		src: '/static/md-help.png',
		text: '常见问题'
	},
	{
		src: '/static/md-headset.png',
		text: '反馈'
	},
	{
		src: '/static/站内消息.png',
		text: '在线客服'
	},
	{
		src: '/static/设置.png',
		text: '设置'
	}
]);
onMounted(() => {});

function handleNoticeClick() {
	uni.navigateTo({
		url: '/pages/chat/chat'
	});
}
</script>

<style lang="scss" scoped>
.empire-mine {
	height: 100%;
	background-color: #fd6363;
}
.empire-mine__avatar {
	background-color: #fd6363;
	padding: 30rpx 30rpx 0;
}
.vip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	padding: 10rpx 0 10rpx 30rpx;
	margin-top: 30rpx;
	background-color: #6a6a6a;
	color: #f2dfa2;
	border-radius: 30rpx 30rpx 0 0;
}
.empire-mine__body {
	padding: 32rpx 0;
	background-color: #f5f5f5;
	border-radius: 30rpx 30rpx 0 0;
}

.empire-mine__grid {
	padding: 0 20rpx;
}
.empire-mine__servies {
	display: grid;
	grid-template-rows: 3fr 1fr;
	align-items: center;
	justify-content: center;
}
</style>
<style scoped>
.empire-mine__avatar /deep/.empire-avatar {
	background-color: #fd6363;
	color: #fff;
}
.empire-mine__avatar /deep/.empire-avatar__title {
	color: #fff;
}
.vip /deep/ button {
	margin-right: 30rpx;
}
.empire-mine__grid /deep/.uni-grid--border {
	border-left: none;
}
.empire-mine__grid /deep/.uni-grid-item--border {
	border: none;
}
</style>
